#{extends 'main.html' /}
#{set title:'Create event' /}
<head>

		<script type="text/javascript" src="../../public/javascripts/jquery.min.js"></script>
        
        <!-- required plugins -->
		<script type="text/javascript" src="../../public/javascripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="../../public/javascripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->

		<link rel="stylesheet" type="text/css" media="screen" href="../../public/stylesheets/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="../../public/stylesheets/demo.css">

        <script type="text/javascript" charset="utf-8">
            Date.firstDayOfWeek = 0;
            Date.format = 'dd/mm/yyyy';           
			var now = new Date();
			//bind start and end dates            
            $(function(){
					//$('#end_date').dpSetStartDate(new Date().asString());				
				$('.date-pick').datePicker();//.val(new Date().asString()).trigger('change');
				//$('#start_date').dpSetEndDate(new Date().asString());
				                
                $('#start_date').bind('dpClosed', function(e, selectedDates){
                    var d = selectedDates[0];
                    if (d) {
                        d = new Date(d);
                        $('#end_date').dpSetStartDate(d.asString());
                    }
                });
                $('#end_date').bind('dpClosed', function(e, selectedDates){
                    var d = selectedDates[0];
                    if (d) {
                        d = new Date(d);
                        $('#start_date').dpSetEndDate(d.asString());
                    }
                });				
				
            });
        </script>

    
    <script type="text/javascript">
    function post(){
    
        var form = document.createElement("form");
        form.setAttribute("method", "post");
        form.setAttribute("action", "createEventResponse");
        
        var assocToProjArg = document.createElement("input");
        assocToProjArg.setAttribute("type", "hidden");
        assocToProjArg.setAttribute("name", "associateToProject");
        assocToProjArg.setAttribute("value", "true");
        form.appendChild(assocToProjArg);
		
        var sprintsSelect = document.getElementById("selSprints");        
        if (sprintsSelect != null) {
            var sprintID = sprintsSelect.value;
            if (sprintID != "none") 
                assocToProjArg.setAttribute("value", "false");
        }        
        
        var nameArg = document.createElement("input");
        nameArg.setAttribute("type", "hidden");
        nameArg.setAttribute("name", "name");
        nameArg.setAttribute("value", document.getElementById("meetingName").value);
        form.appendChild(nameArg);
        
        var descriptonArg = document.createElement("input");
        descriptonArg.setAttribute("type", "hidden");
        descriptonArg.setAttribute("name", "description");
        descriptonArg.setAttribute("value", document.getElementById("description").value);
        form.appendChild(descriptonArg);
        
        var typeArg = document.createElement("input");
        typeArg.setAttribute("type", "hidden");
        typeArg.setAttribute("name", "type");
        typeArg.setAttribute("value", document.getElementById("meetingType").value);
        form.appendChild(typeArg);
        
        var locationArg = document.createElement("input");
        locationArg.setAttribute("type", "hidden");
        locationArg.setAttribute("name", "location");
        locationArg.setAttribute("value", document.getElementById("meetingLocation").value);
        form.appendChild(locationArg);
        
        var startDate = $("#start_date").dpGetSelected();
        
        if (startDate.length > 0) {
            var stDay = startDate[0].getDate();
            var stMonth = startDate[0].getMonth();
            var stYear = startDate[0].getFullYear();
            
            var strtDayArg = document.createElement("input");
            strtDayArg.setAttribute("type", "hidden");
            strtDayArg.setAttribute("name", "strtDay");
            strtDayArg.setAttribute("value", stDay);
            form.appendChild(strtDayArg);
            
            var strtMonthArg = document.createElement("input");
            strtMonthArg.setAttribute("type", "hidden");
            strtMonthArg.setAttribute("name", "strtMonth");
            strtMonthArg.setAttribute("value", stMonth);
            form.appendChild(strtMonthArg);
            
            var strtYearArg = document.createElement("input");
            strtYearArg.setAttribute("type", "hidden");
            strtYearArg.setAttribute("name", "strtYear");
            strtYearArg.setAttribute("value", stYear);
            form.appendChild(strtYearArg);
        }
        
        var strtHourArg = document.createElement("input");
        strtHourArg.setAttribute("type", "hidden");
        strtHourArg.setAttribute("name", "strtHour");
        strtHourArg.setAttribute("value", document.getElementById("start_hour").value);
        form.appendChild(strtHourArg);
        
        var strtMinArg = document.createElement("input");
        strtMinArg.setAttribute("type", "hidden");
        strtMinArg.setAttribute("name", "strtMin");
        strtMinArg.setAttribute("value", document.getElementById("start_min").value);
        form.appendChild(strtMinArg);
        
        var endDate = $("#end_date").dpGetSelected();
        
        if (endDate.length > 0) {
            var endDay = endDate[0].getDate();
            var endMonth = endDate[0].getMonth();
            var endYear = endDate[0].getFullYear();
            
            var endDayArg = document.createElement("input");
            endDayArg.setAttribute("type", "hidden");
            endDayArg.setAttribute("name", "endDay");
            endDayArg.setAttribute("value", endDay);
            form.appendChild(endDayArg);
            
            var endMonthArg = document.createElement("input");
            endMonthArg.setAttribute("type", "hidden");
            endMonthArg.setAttribute("name", "endMonth");
            endMonthArg.setAttribute("value", endMonth);
            form.appendChild(endMonthArg);
            
            var endYearArg = document.createElement("input");
            endYearArg.setAttribute("type", "hidden");
            endYearArg.setAttribute("name", "endYear");
            endYearArg.setAttribute("value", endYear);
            form.appendChild(endYearArg);
        }
        
        var endHourArg = document.createElement("input");
        endHourArg.setAttribute("type", "hidden");
        endHourArg.setAttribute("name", "endHour");
        endHourArg.setAttribute("value", document.getElementById("end_hour").value);
        form.appendChild(endHourArg);
        
        var endMinArg = document.createElement("input");
        endMinArg.setAttribute("type", "hidden");
        endMinArg.setAttribute("name", "endMin");
        endMinArg.setAttribute("value", document.getElementById("end_min").value);
        form.appendChild(endMinArg);        
        
        var associatedIdArg = document.createElement("input");
        associatedIdArg.setAttribute("type", "hidden");
        associatedIdArg.setAttribute("name", "associatedID");        
        if (sprintID == null || sprintID == "none") 
            associatedIdArg.setAttribute("value", document.getElementById("project").value);
        else 
            associatedIdArg.setAttribute("value", sprintID);        
        form.appendChild(associatedIdArg);
		
        document.body.appendChild(form); // Not entirely sure if this is necessary
        form.submit();
    }
    </script>
	
	<script type='text/javascript'>
		// Disables association to a sprint if the created event is a sprint itself
		function setAssociationEnabled(){
            var selEventType = document.getElementById('meetingType');
            var selSprints = document.getElementById('selSprints');
            if (selEventType.options[selEventType.selectedIndex].text == "Sprint") {
                selSprints.value = "none";
                selSprints.setAttribute("disabled", "disabled");
            }
            else 
                selSprints.removeAttribute("disabled");
		}
	</script>
</head>
Create an event of type
 			<select id="meetingType" onChange="setAssociationEnabled()">
                #{list items:types, as:'type'}<option value="${type.getEntityId()}">${type.type}</option>
                #{/list} 
            </select>
						in project  <b>${project.name}</b>
#{form @Events.createEvent(project.getEntityId()), id:'form'}
<table>
    <tr>
        <td>            
			<input type="hidden" id="project" value="${project.getEntityId()}">
        </td>
    </tr>
    <tr height="10">
    </tr>	
    <tr>
        <td>Event Name:</td>
    </tr>
    <tr>
        <td><input type="text" name="meetingName" id="meetingName" class="validate[required,length[5,50]]" /></td>
    </tr>
	<tr>
        <td>Location:</td>
    </tr>
    <tr>
        <td><input type="text" name="meetingLocation" id="meetingLocation"/></td>
    </tr>
	
    <tr>
        <td>Description:</td>		
    </tr>
    <tr>
        <td>
            <textarea rows="10" cols="30" name = "description" id = "description" class="validate[required,length[5,500]]">
            </textarea>
        </td>
     </tr>
	<tr height="10">
    </tr>
</table>

<table>
    <tr>
        <td>
            Starts at&nbsp;</td>
        <td> 
			<select id="start_hour" style="width:40px">
	            <option value="00">00</option>	<option value="01">01</option>  <option value="02">02</option>	<option value="03">03</option>	<option value="04">04</option>	
				<option value="05">05</option>	<option value="06">06</option>	<option value="07">07</option>	<option value="08">08</option>	<option value="09">09</option>	
				<option value="10">10</option>	<option value="11">11</option>	<option value="12">12</option>	<option value="13">13</option>	<option value="14">14</option>	
				<option value="15">15</option>	<option value="16">16</option>	<option value="17">17</option>	<option value="18">18</option>	<option value="19">19</option>	
				<option value="20">20</option>	<option value="21">21</option>	<option value="22">22</option>	<option value="23">23</option>	
            </select>:<select id="start_min" style="width:40px">
	            <option value="00">00</option>	<option value="05">05</option>  <option value="10">10</option>	<option value="15">15</option>	<option value="20">20</option>	
				<option value="25">25</option>	<option value="30">30</option>	<option value="35">35</option>	<option value="40">40</option>	<option value="45">45</option>	
				<option value="50">50</option>	<option value="55">55</option>		
            </select> on <td> <input name="start_date" id="start_date" class="date-pick" readonly="readonly"  /> </td>			 
        </td>
	</tr>
    <tr>
        <td>
           Ends at </td>
        <td> 
			<select id="end_hour" style="width:40px">
	            <option value="00">00</option>	<option value="01">01</option>  <option value="02">02</option>	<option value="03">03</option>	<option value="04">04</option>	
				<option value="05">05</option>	<option value="06">06</option>	<option value="07">07</option>	<option value="08">08</option>	<option value="09">09</option>	
				<option value="10">10</option>	<option value="11">11</option>	<option value="12">12</option>	<option value="13">13</option>	<option value="14">14</option>	
				<option value="15">15</option>	<option value="16">16</option>	<option value="17">17</option>	<option value="18">18</option>	<option value="19">19</option>	
				<option value="20">20</option>	<option value="21">21</option>	<option value="22">22</option>	<option value="23">23</option>	
            </select>:<select id="end_min" style="width:40px">
	            <option value="00">00</option>	<option value="05">05</option>  <option value="10">10</option>	<option value="15">15</option>	<option value="20">20</option>	
				<option value="25">25</option>	<option value="30">30</option>	<option value="35">35</option>	<option value="40">40</option>	<option value="45">45</option>	
				<option value="50">50</option>	<option value="55">55</option>		
            </select> on <td> <input name="end_date" id="end_date" class="date-pick" readonly="readonly" />	</td>		 
        </td>
    </tr>
	<tr>
       #{if sprints.size>0}
        <td>Associate to:</td> 
		#{/if}
		#{if sprints.size>0}
        <td valign="top">
            <select id="selSprints" >
                <!-- A dummy option to detect if the created event is not to be associated to a sprint -->
				<option value="none" selected="selected">N/A</option>
                #{list items:sprints, as:'sprint'}
				<option value="${sprint.getEntityId()}">${sprint.name}</option>
                #{/list} 
            </select>
        </td>
        #{/if}
    </tr>
    <tr>
       
    </tr>
	   	
    <tr>
      
        
    </tr>
</table>
<br/>
<input type="button" value="Create" onclick="post()"/>
#{/form}